'use strict'
let fn_data;
$(function () {

    console.log('我来了，我又走了');
    query();
})
function find() {
    /*
         1、拿到关键字
         2、向服务端发送请求，获得列表数据
         3、根据关键字，在获得的列表数据中过滤符合条件的数据，获得过滤后的数据
         4、就使用js或者jQuery,来操作原来的页面元素，使之呈现我们需要的效果
    */

    // 1、拿到关键字
    let keyword = $('#keyword').val();
    if (keyword) {
        console.log(keyword);
        // 2请求获得商品列表数据
        $.get(`${baseUrl}/product`, data => {
            console.log(data);
            // 3、
            let result = data.filter(item => {
                return item.id == keyword || item.name == keyword || item.price == keyword || item.stock == keyword;
            })

            console.log(result);

            // 第4步 用js或者jQuery来操作dom元素，呈现需要的效果
            // a、使用jquery获得所有数据区域的行元素 这里的行使用class=rowData
            // b、干掉
            // c、遍历筛选的数据，将数据插入到原表格中 这里的表格可以使用id=tbData

            let row = $('.rowData');
            row.remove();
            result.forEach(item => {
                let html = `
                <tr class="rowData">
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.price}</td>
                    <td>${item.stock}</td>
                    <td>${item.supplier}</td>
                </tr>
                `
                $('#tbData').append(html);
            })


        })
    } else {
        $.get(`${baseUrl}/product`, data => {
            console.log(data);
            // 3、
            let result = data.filter(item => {
                return item.id == keyword || item.name == keyword || item.price == keyword || item.stock == keyword;
            })

            console.log(result);

            // 第4步 用js或者jQuery来操作dom元素，呈现需要的效果
            // a、使用jquery获得所有数据区域的行元素 这里的行使用class=rowData
            // b、干掉
            // c、遍历筛选的数据，将数据插入到原表格中 这里的表格可以使用id=tbData

            let row = $('.rowData');
            row.remove();
            data.forEach(item => {
                let html = `
                <tr class="rowData">
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.price}</td>
                    <td>${item.stock}</td>
                    <td>${item.supplier}</td>
                    
                </tr>
                `
                $('#tbData').append(html);
            })
        })
    }

}

// 查询，思路是将keyword传入到后端接口，查询到数据后再返回
function query() {
    let keyword = $('#keyword').val();
    //将（可能存在的）关键字传给后台
    getProductList(keyword).then(data => {
        renderFn(data);
    })

    // 自己封装了一个类axios请求库
    // request.get(`${baseUrl}/product?keyword=5').then(data => {
    //     console.log(data);
    //     renderFn(data);
    // })

}


function renderFn(arr) {
    let row = $('.rowData');
    let tb = $('#tbData');
    row.remove();
    arr.forEach(item => {
        let html = `
                <tr class="rowData" key="${item.id}">
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.price}</td>
                    <td>${item.stock}</td>
                    <td>${item.supplier}</td>
                    <td>
                        <input type="button" value="编辑" onclick="update(${item.id})" >
                        <input type="button" value="删除" onclick="del(${item.id})" >
                    </td>
                </tr>
                `
        tb.append(html);
    })
}

function update(id) {
    location.href=`./addOrEdit.html?id=${id}`;
}

function del(id) {
    let confirmDel = confirm(`确定要删除id为${id}的项目吗？`);
    if (confirmDel) {
        delProductById(id).then(data => {
            let id = data.data.id;
            console.log(data);
            // 找到id对应的那一行，移除掉，让页面有所反应和动作
            $(`[key=${id}]`).remove();
        })
    }

}

function add(obj) {
    // 点击添加，跳转到编辑页面
    location.href = './addOrEdit.html';
    postProduct(obj).then(data => {
        console.log(data);
    })
}